<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import request from '@/api/index';
  import xmimg from '@/components/xmimg.vue';
  import bwtsBut from './bwtsBut.vue';
  import { stakeType, hasStakeList, betsStatus, newStakeType, round } from '@/pinia/getter'
  import { userStore } from '@/pinia/modules/user';
  import { controlStore } from '@/pinia/modules/controller';
  const $emit = defineEmits(['change'])
  const useUserStore = userStore()
  const useControlStore = controlStore()
  const newIntegral = ()=>{
    return stakeType.value.find(res=>res.type == newStakeType.value)?.integral
  }
  const action = reactive({
    tipsShow:false,
    integralType:newStakeType.value,
    integral:newIntegral(),
    butMoveType:0,
    removeBut:false
  })
  const handleTouchstart = (item:any = {})=>{
    const { type=1 , integral=newIntegral() } = item
    if(action.integralType == type) return
    action.integralType = type
    action.integral = integral
    action.butMoveType = type
  }
  const handleRemoveTouchstart = ()=>{
    if(round.value > 20) return
    if(!betsStatus.value) {
      const index = hasStakeList.value.findIndex(res=> Number(res.price) > 0)
      if(index < 0) return
    }
    action.removeBut = true
  }
  const handleRemove = async()=>{
    if(!action.removeBut) return
    request.userStakeBack().then(res=>{
      action.removeBut = false
      const obj = res.data || {}
      useControlStore.betsStatus = false
      useUserStore.setWallet(obj)
    }).catch(()=>{
      action.removeBut = false
    })
  }
  const bwtsButChange = (type:any = 0)=>{
    $emit('change',type)
  }
  const handlePrice = (item:any = {})=>{
    action.butMoveType = 0
  }
</script>

<template>
  <div class="LotteryList">
    <!-- 押注数量按钮列表 -->
    <div class="priceList flex-align">
      <div
      v-for="item in stakeType"
      :class="[
        'butBack flex-align-center',
        action.butMoveType == item.type?'selcetBut butAnimation':'',
        action.integralType == item.type?'selcetBut':''
      ]"
      @touchstart="handleTouchstart(item)"
      @touchend="handlePrice(item)"
      >
        <xmimg src="@/assets/images/icon3.png" class="iconImg" />
        <div class="num">{{ item.integral }}</div>
      </div>
    </div>
    <!-- 押注按钮列表 -->
    <div class="betsList">
      <bwtsBut
        v-for="item in hasStakeList"
        :integralType="action.integralType"
        :integral="action.integral"
        :poolId="item.poolId"
        :price="item.price"
        :allPrice="item.allPrice"
        :rankList="item.rankList"
        @change="bwtsButChange"
      />
      <xmimg style="display: none;"
        :class="[
          'butImage',
          action.removeBut?'butAnimation':'',
        ]"
        @touchstart="handleRemoveTouchstart"
        @touchend="handleRemove"
      src="@/assets/images/butImage1.png"
      class="butImage" />
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .LotteryList {
    width: 100%;
    padding: 12px 13px 0;
    box-sizing: border-box;
    .priceList {
      margin-bottom: 12px;
      .butBack {
        width: 113px;
        height: 34px;
        background: url($href+'butback1.png') left top / 100% 100% no-repeat;
        transition: background .2s, box-shadow .2s;
        .iconImg {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
        .num {
          color: #fff;
          font-size: 20px;
          font-weight: 600;
          line-height: 20px;
        }
      }
      .butAnimation {
        transform: scale(0.98);
      }
      .selcetBut {
        background-image: url($href+'butback2.png');
      }
      .butBack:nth-child(2) {
        margin: 0 5px;
      }
    }
    .betsList {
      display: grid;
      grid-template-columns: repeat(4 , 82px);
      grid-gap: 7px 7px;
      .butImage {
        height: 107px;
        transition: transform .25s;
      }
    }
  }
</style>